<!-- 网约农服 -->
<template>
  <div>
    <el-tabs
      class="pageTab"
      v-model="newsTabCodeActive"
      type="card"
      @tab-click="tabClick"
    >
      <el-tab-pane
        v-for="(tab, index) in newsTabCodeArr"
        :label="tab.name"
        :name="tab.name"
        :key="index"
      ></el-tab-pane>
    </el-tabs>

    <Service
      ref="Service"
      v-if="newsTabCode.code == 'Service'"
      :newsTabCode="newsTabCode"
    />
    <Service2
      ref="Service2"
      v-else
      :newsTabCode="newsTabCode"
    />
  </div>
</template>

<script>
import utils from "@/utils";

import Service from "./Service";
import Service2 from "./Service2";

export default {
  data() {
    return {
      newsTabCode: "", //新闻页签
      newsTabCodeActive: "", //新闻页签
      newsTabCodeArr: [], //新闻页签
    };
  },
  components: {
    Service,
    Service2,
  },
  mounted() {
    this.initOptions();
  },
  methods: {
    async initOptions() {
      // 知识页签
      this.newsTabCodeArr = [
        {
          name: "农事农服",
          code: "Service",
        },
        {
          name: "农户求助",
          code: "Service2",
        },
      ];
      // 设置初始显示
      if (this.newsTabCodeArr.length > 0) {
        this.newsTabCode = this.newsTabCodeArr[0];
        this.newsTabCodeActive = this.newsTabCodeArr[0].name;
      }

      this.query();
    },
    // tab切换
    tabClick(tab, event) {
      this.newsTabCode = this.newsTabCodeArr[tab.index];

      this.query();
    },
    query() {
      this.$nextTick(() => {
        if (this.newsTabCode.code == "Service") {
          this.$refs.Service.query();
        } else {
          this.$refs.Service2.query();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pageTab {
  margin: 15px;
}
</style>
